<template>
  <div class="tableData">
    <div class="TableDataDetails">
      <el-table
        :data="TableDataDetails.list"
        stripe
        :header-cell-style="tableHeaderColor"
        :cell-style="rowClass"
        max-height="420"
      >
        <el-table-column prop="tableCoding" label="表编码"> </el-table-column>
        <el-table-column prop="tableName" label="表名称" min-width="140px">
        </el-table-column>
        <el-table-column
          prop="repositoryCode"
          label="资源库编码"
          min-width="100px"
        >
        </el-table-column>
        <el-table-column
          prop="repositoryName"
          label="资源库名称"
          min-width="120px"
        >
        </el-table-column>
        <el-table-column prop="layerName" label="所属层" min-width="120px">
        </el-table-column>
        <el-table-column prop="creationTime" label="创建时间" min-width="150px">
        </el-table-column>
        <el-table-column prop="turnoverTime" label="更新时间" min-width="150px">
        </el-table-column>
        <el-table-column prop="quality" label="稽核质量"> </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          layout="total,prev, pager, next"
          @current-change="handleCurrentChange"
          :page-size="TableDataDetails.pageSize"
          :total="TableDataDetails.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TableData",
  props: {
    TableDataDetails: {
      type: Object,
    },
  },
  data() {
    return {
      pageSize: 5,
    };
  },

  methods: {
    //设置表头行的样式
    tableHeaderColor() {
      return "background-color:transparent;color:#1682e6;text-align:center";
    },
    rowClass() {
      //表格数据居中显示
      return "text-align:center";
    },
    handleCurrentChange(val) {
      this.$emit("current3", val);
    },
  },
};
</script>

<style  lang="scss" scoped>
.TableDataDetails {
  height: 100%;
  flex-grow: 1;
}
.tableData {
  flex: 1;
  display: flex;
  flex-direction: column;
  .TableDataDetails {
    flex: 1;
    .el-table {
      position: absolute;
      top: 0;
      width: 100%;
    }
  }
}
.block {
  width: 100%;
  display: flex;
  position: absolute;
  bottom: 0;
  justify-content: center;
  margin: 8px auto;
}
</style>